<template>
  <div class="score-board">
    <Card :bordered="true" :style="{ height: '100%' }">
      <div slot="title" class="score-header">
        <h2 class="text-center">Current Score</h2>
        <p>{{ myScore }}</p>
      </div>

      <List :split="false" class="score-board__list">
        <div slot="header">
          <h2 class="text-center">Score Board</h2>
        </div>
        <TransitionListFade>
          <ListItem
            v-for="(user, i) in topNUsers"
            :key="user.name"
            class="transition-list-fade-item"
          >
            <ListItemMeta
              :title="user.name"
              :description="`Score: ${user.score}`"
            >
              <template slot="avatar">
                <Avatar
                  :style="getUserAvatarStyle(i)"
                  :src="user.avatarSrc"
                  icon="ios-person"
                  >U{{ i }}}</Avatar
                >
              </template>
            </ListItemMeta>
          </ListItem>
        </TransitionListFade>
      </List>
    </Card>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from '@/plugins/class-component-hooks'
import { Avatar } from 'view-design'

export interface UserScoreInfo {
  name: string
  avatarSrc: string
  score: number
}

interface ColorPair {
  color: string
  bgColor: string
}

@Component
export default class GameScoreBoard extends Vue {
  @Prop({ default: 100 }) private readonly myScore!: number
  @Prop({
    default: () => {
      return [
        {
          name: 'Brody',
          avatarSrc: '',
          score: 100
        },
        {
          name: 'Alice',
          avatarSrc: '',
          score: 80
        },
        {
          name: 'Tim',
          avatarSrc: '',
          score: 70
        }
      ]
    }
  })
  readonly allScores!: UserScoreInfo[]

  get topNUsers() {
    // descending
    return this.allScores.slice(0).sort((a, b) => {
      if (a.score < b.score) {
        return 1
      } else if (a.score == b.score) {
        return 0
      } else {
        return -1
      }
    })
  }

  private colorMap: Record<number, ColorPair> = {
    0: {
      color: '#f56a00',
      bgColor: '#fde3cf'
    },
    1: {
      color: '#f56a00',
      bgColor: '#fde3cf'
    },
    2: {
      color: '#f56a00',
      bgColor: '#fde3cf'
    }
  }

  private getUserAvatarStyle(index: number) {
    let color: string = '#ffffff'
    let bgColor: string = '#cccccc'
    if (index <= 2 && index >= 0) {
      let pair = this.colorMap[index]
      color = pair.color
      bgColor = pair.bgColor
    }

    return {
      color: color,
      'background-color': bgColor
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '@/styles/general.scss';
.score-board {
  @media screen and (min-width: $size-xsm) {
    height: 100%;
  }

  div.score-board__list {
    > div.ivu-list-container {
      height: 5rem;
      overflow: scroll;
      @media screen and (max-width: $size-xsm) {
      }
    }
  }
}

.text-center {
  text-align: center;
}

.score-header {
  height: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  p {
    margin-top: 1rem;
    text-align: center;
    font-size: 1.2rem;
  }
}
</style>

<style lang="scss">
@import '@/styles/general.scss';
.score-board {
  @media screen and (max-width: $size-xsm) {
    div.score-board__list {
      > div.ivu-list-container {
        height: 5rem;
        overflow: scroll;
      }
    }
  }
}
</style>
